<template>
	<view class="mine-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="我的" :show-back="false">
			<template #right>
				<uni-icons type="gear" size="20" color="#333" @click="goToSetting"></uni-icons>
			</template>
		</custom-navbar>

		<!-- 页面内容 -->
		<view class="page-content">
			<!-- 用户信息区域 -->
		<view class="user-info-section">
			<!-- 未登录状态 -->
			<view class="user-info-wrapper" v-if="!hasLogin">
				<view class="avatar-null">
					<uni-icons type="person" size="50" color="#CCCCCC"></uni-icons>
				</view>
				<view class="user-detail">
					<text class="nickname">未登录</text>
					<button class="login-btn" @click="handleLogin">点击登录</button>
				</view>
			</view>

			<!-- 已登录状态 -->
			<view class="user-info-wrapper" v-else>
				<image class="avatar" :src="userInfo.avatarUrl || '/static/images/default-avatar.png'" mode="aspectFill"></image>
				<view class="user-detail">
					<text class="nickname">{{ userInfo.nickName || '用户' }}</text>
					<view class="float-desc">
						<text class="user-desc" @click="goToProfile">个人信息</text>
						<uni-icons type="right" size="16" color="#999999"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @click="goToPage('/pages/demo/demo')">
					<uni-icons type="list" size="24" color="#007AFF"></uni-icons>
					<text class="menu-text">我的记录</text>
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
				<view class="menu-item" @click="goToPage('/subPages/setting/setting')">
					<uni-icons type="gear" size="24" color="#007AFF"></uni-icons>
					<text class="menu-text">设置</text>
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>

			<view class="menu-group">
				<view class="menu-item" @click="showAbout">
					<uni-icons type="help" size="24" color="#007AFF"></uni-icons>
					<text class="menu-text">关于我们</text>
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
				<view class="menu-item" @click="clearCache">
					<uni-icons type="trash" size="24" color="#007AFF"></uni-icons>
					<text class="menu-text">清除缓存</text>
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>

			<!-- 退出登录按钮 -->
			<view class="logout-section" v-if="hasLogin">
				<button class="logout-btn" @click="handleLogout">退出登录</button>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
export default {
	name: 'MinePage',
	data() {
		return {
			hasLogin: false,
			userInfo: {}
		};
	},
	onShow() {
		this.checkLoginStatus();
	},

	methods: {
		// 检查登录状态
		checkLoginStatus() {
			try {
				const userInfo = uni.getStorageSync('userInfo');
				const userToken = uni.getStorageSync('userToken');
				if (userToken && userInfo) {
					this.userInfo = JSON.parse(userInfo);
					this.hasLogin = true;
				} else {
					this.userInfo = {};
					this.hasLogin = false;
				}
			} catch (e) {
				console.error('获取登录状态失败', e);
				this.hasLogin = false;
			}
		},

		// 处理登录
		handleLogin() {
			// 跳转到登录页面
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},

		// 跳转到个人信息页面
		goToProfile() {
			if (this.hasLogin) {
				this.goPage('/pages/profile/profile');
			}
		},

		// 页面跳转
		goToPage(url) {
			if (this.hasLogin || url === '/subPages/setting/setting') {
				uni.navigateTo({
					url: url
				});
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
			}
		},

		// 显示关于信息
		showAbout() {
			uni.showModal({
				title: '关于我们',
				content: '这是一个uni-app开发模板，包含了常用的功能和组件。',
					showCancel: false
			});
		},

		// 清除缓存
		clearCache() {
			uni.showModal({
				title: '提示',
				content: '确定要清除缓存吗？',
				success: (res) => {
					if (res.confirm) {
						uni.clearStorage({
							success: () => {
								uni.showToast({
									title: '缓存已清除',
									icon: 'success'
								});
								this.checkLoginStatus();
							}
						});
					}
				}
			});
		},

		// 退出登录
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						this.logout();
					}
				}
			});
		},

		// 执行退出登录
		logout() {
			// 清除用户信息和token
			uni.removeStorageSync('userInfo');
			uni.removeStorageSync('userToken');
			
			// 更新登录状态
			this.hasLogin = false;
			this.userInfo = {};
			
			// 显示退出成功提示
			uni.showToast({
				title: '已退出登录',
				icon: 'success'
			});
		},

		// 跳转到设置页面
		goToSetting() {
			uni.navigateTo({
				url: '/subPages/setting/setting'
			});
		}
	}
};

</script>

<style>
	.mine-container {
		display: flex;
		flex-direction: column;
		/* min-height: 100vh; */
		background-color: #F6F9FF;
		height: 95vh;

		.page-content {
			padding-top: 88rpx; // 为自定义导航栏留出空间
		}
	}

	.user-info-section {
		background: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		height: 414upx;
		position: relative;
		box-sizing: border-box;
	}

	.user-info-wrapper {
		display: flex;
		width: 702upx;
		height: 108upx;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 0upx 4upx 12upx 0upx rgba(0, 0, 0, 0.04);
		border-radius: 16upx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -3%
	}

	.avatar-placeholder {
		/* 		width: 160upx;
		height: 160upx; */
		border-radius: 50%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30upx;
	}

	.avatar-null {
		width: 128upx;
		height: 128upx;
		border-radius: 32upx;
		border: 4rpx solid #FFFFFF;
		/* margin-right: 30upx; */
		position: absolute;
		left: 6%;
		top: -45%;
		z-index: 999;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 128upx;
		height: 128upx;
		border-radius: 32upx;
		border: 4rpx solid #FFFFFF;
		/* margin-right: 30upx; */
		position: absolute;
		left: 6%;
		top: -45%;
		z-index: 999;
	}

	.icon-box {
		width: 32upx;
		height: 32upx;
		object-fit: contain
	}

	.user-detail {
		display: flex;
		flex-direction: column;
		font-weight: 400;
		font-size: 28upx;
		color: #999999;
	}
	
	.user-desc {
		color: #999999;
		font-size: 28upx;
		margin-right: 6upx;
	}

	.float-desc {
		position: absolute;
		right: 24upx;
		bottom: 37%;
		display: flex;
		align-items: center;
	}

	.nickname {
		color: #333333;
		font-weight: 600;
		font-size: 36upx;
		/* 		margin-bottom: 10upx; */
		position: absolute;
		left: 16%;
		bottom: 31%;
		width: 244upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.user-id {
		font-size: 28upx;
		color: rgba(255, 255, 255, 0.8);
	}

	.login-btn {
		background-color: #9BC7FF;
		color: #FFF;
		font-size: 32upx;
		padding: 0 40upx;
		border-radius: 40upx;
		font-weight: bold;
		border: none;
		position: absolute;
		right: 16upx;
		top: 50%;
		transform: translateY(-50%);
	}

	.menu-section {
		flex: 1;
		padding: 30upx;
		/* box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.04); */
		background-color: #F6F9FF;
		height: 100%;
	}

	.menu-group {
		background-color: #ffffff;
		border-radius: 20upx;
		margin-bottom: 30upx;
		overflow: hidden;
		border-radius: 16upx;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30upx;
		/* border-bottom: 1px solid #f5f5f5; */
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-text {
		flex: 1;
		margin-left: 20upx;
		font-size: 32upx;
		color: #333333;
	}

	.logout-btn {
		background-color: #ffffff;
		border-radius: 20upx;
		padding: 30upx;
		text-align: center;
		margin-top: 60upx;
	}

	.logout-btn text {
		color: #ff5a5f;
		font-size: 32upx;
		font-weight: bold;
	}
</style>